<template>
  <el-cascader
    v-model="preMenuVal"
    :options="preMenuList"
    :show-all-level="false"
    placeholder="请选择，不选则默认为顶级目录"
    :props="{
      value: 'id',
      label: 'name',
      children: 'children',
      disabled: 'disabled',
      checkStrictly: true,
    }"
  />
</template>

<script setup>
const props = defineProps({
  menuType: {
    type: String,
    default: '',
  },
})
import { apiGetPreMenuList } from '@/apis/system/menuManage'
import { watch } from 'vue'
const preMenuList = ref()
const preMenuVal = defineModel()
const getPreMenuList = async () => {
  const resData = await apiGetPreMenuList(props.menuType);
  preMenuList.value = addDisabledByMenuType(resData)
}
getPreMenuList()
// 新增禁用属性
const addDisabledByMenuType = (list) => {
  return list.map((item) => {
    item.disabled = false
    if (
      (props.menuType === 'folder' || props.menuType === 'menu') &&
      item.menuType !== 'folder'
    ) {
      item.disabled = true
    }
    if (props.menuType === 'button' && item.menuType !== 'menu') {
      item.disabled = true
    }
    item.children = addDisabledByMenuType(item.children || [])
    return item
  })
}

watch(
  () => props.menuType,
  () => {
    if (preMenuList.value?.length > 0) {
      preMenuList.value = addDisabledByMenuType(preMenuList.value)
      
    }
  }
)
</script>

<style lang="scss" scoped></style>
